<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="12" class="flex-row-left">
				<el-input  class="w-200 mr-10" placeholder="输入名称搜索" clearable />
				<el-button type="primary"><el-icon class="mr-5"><Search /></el-icon>查询</el-button>
			</el-col>			
			<el-col :span="12" class="flex-row-right">
				<el-button type="primary" plain @click="add"><el-icon class="mr-5"><Promotion /></el-icon>推送任务</el-button>
				<el-button type="primary" plain @click="add"><el-icon class="mr-5"><TopRight /></el-icon>重新取数</el-button>
				<el-button type="primary" plain @click="add"><el-icon class="mr-5"><Plus /></el-icon>新建</el-button>
				<el-button><el-icon class="mr-5"><Delete /></el-icon>批量删除</el-button>
			</el-col>
		 </el-row>
		 <el-table :data="tableData" v-loading="loading" class="mt-20" border :header-cell-style="{ backgroundColor:'#f8f8f8'}">
		 	<el-table-column type="selection" width="55" />	
		 	<el-table-column prop="id" label="ID"  width="55"/>
		 	<el-table-column prop="id" label="序号"  />
		 	<el-table-column prop="id" label="单据编号" width="120" />
		 	<el-table-column prop="id" label="客户名称" width="120"/>
			<el-table-column prop="id" label="财务系统" width="120"/>
			<el-table-column prop="id" label="公司性质" width="120"/>
			<el-table-column prop="id" label="会计顾问" width="120"/>
			<el-table-column prop="id" label="年度" width="120"/>
			<el-table-column prop="id" label="月份" width="120"/>
			<el-table-column prop="id" label="单据状态" width="120"/>
			<el-table-column prop="id" label="票据状态" width="120"/>
			<el-table-column prop="id" label="票据进度" width="120"/>
			<el-table-column prop="id" label="上传人" width="120"/>
			<el-table-column prop="id" label="上传日期" width="120"/>
			<el-table-column prop="id" label="上传类型" width="120"/>
			<el-table-column prop="id" label="上传数量" width="120"/>
			<el-table-column prop="id" label="是否上传完成" width="120"/>
			<el-table-column prop="id" label="上传完成时间" width="120"/>
			<el-table-column prop="id" label="是否补票" width="120"/>
		 	<el-table-column prop="id" label="是否退回" width="120"/>
			<el-table-column prop="id" label="是否已发起任务" width="120"/>
			<el-table-column prop="id" label="发起人" width="120"/>
			<el-table-column prop="id" label="发起时间" width="120"/>
			<el-table-column prop="id" label="备注" width="120"/>
		 </el-table>
		 <div class="flex-row-right mt-20">
			 <el-pagination
			   :page-sizes="[100, 200, 300, 400]"
			   layout="total, sizes, prev, pager, next, jumper"
			   :total="400"
			 />
		 </div>
		 <el-row :gutter="20">
		 	<el-col :span="12" class="flex-row-left">
		 		<el-input  class="w-200 mr-10" placeholder="客户的名字" clearable />
		 		<el-button type="primary"><el-icon class="mr-5"><Search /></el-icon>查询</el-button>
		 	</el-col>
		  </el-row>
		 <el-table :data="tableData" v-loading="loading" class="mt-20" border :header-cell-style="{ backgroundColor:'#f8f8f8'}">
		 	<el-table-column width="55"/>
		 	<el-table-column prop="id" width="55" label="ID"/>
		 	<el-table-column prop="id" width="120" label="图片编码"/>	
		 	<el-table-column prop="id" width="120" label="图片原名"/>
		 	<el-table-column prop="id" label="上传人" width="120"/>
		 	<el-table-column prop="id" label="上传时间" width="120"/>
		 	<el-table-column prop="id" label="状态" width="120"/>
		 	<el-table-column prop="id" label="票据类型" width="120"/>
		 	<el-table-column prop="id" label="业务类型" width="120"/>			
		 	<el-table-column prop="id" label="票据数量" width="120"/>
		 	<el-table-column prop="id" label="总金额" width="120"/>
		 	<el-table-column prop="id" label="备注"/>
		 </el-table>
		 <div class="flex-row-right mt-20">
		 			 <el-pagination
		 			   :page-sizes="[100, 200, 300, 400]"
		 			   layout="total, sizes, prev, pager, next, jumper"
		 			   :total="400"
		 			 />
		 </div>
		 <cateForm 
		 :dialogVisible="dialogVisible" 
		 :width="40" 
		 @dialogVisibleByValue="dialogVisibleByValue"  
		 ref="cateForm"
		 />
	</div>
</template>

<script>
	import cateForm from '@/components/basic/employees/cate/form.vue'
	export default{
		components:{
			cateForm,
		},
		data(){
			return {	
				dialogVisible:false,
				value5:false,
				loading:true,
				tableData:[],
			}
		},		
		created() {
			this.getList();
		},
		methods:{
			add(){
				this.dialogVisible =  true;
				this.$nextTick(() => {
					
				});
			},
			dialogVisibleByValue (dialogVisible) {
				this.dialogVisible = dialogVisible
			},
			getList(){
				let that = this;
				setTimeout(() => {
				    that.tableData = [
				      {
				    	id: 1,
				      },
				      {
				    	id: 2,
				      },
				      {
				    	id: 3,
				      },
				      {
				    	id: 4,
				      },
				      {
				    	id: 5,
				      },
				    ];
				    that.loading = false;
				}, 2000)
			}
		},
	}
</script>
<style>
	.example-showcase .el-loading-mask {
	  z-index: 9;
	}
</style>
